<template>
  <div>
    <el-dialog title="收藏到指定歌单" :visible.sync="dialogVisible" width="30%">
      <InfoList :list="creatPlayList" @clickitem="add">
        <template #img="{ item }">
          <img :src="item.coverImgUrl" alt="" class="sub-img mleft-10" />
        </template>
      </InfoList>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import InfoList from "@/components/list/infoList.vue";
import { musicToPlayList } from "@/api/request";
export default {
  components: {
    InfoList,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  props: ["musicList"],
  computed: {
    ...mapGetters(["creatPlayList"]),
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    async add(item) {
      console.log(item);
      let pid = item.id;
      if (typeof pid !== "number") {
        return this.$message.error("请选择一个歌单");
      }
      let addObj = {
        op: "add",
        pid,
        tracks: this.musicList.join(","),
      };
      const {data:res} = await musicToPlayList(addObj);
      if(res.status !== 200) return this.$message.error('收藏失败');
      this.$store.dispatch('getLikeList');
      this.dialogVisible = false ;
      this.$message.success('收藏成功');
    },
  },
};
</script>

<style lang="less" scoped>
</style>